<template>
  <div class="dashboard-home">
    <!-- 数据概览 -->
    <el-row :gutter="20">
      <el-col :span="6" v-for="item in stats" :key="item.title">
        <el-card shadow="hover">
          <div class="flex items-center">
            <div class="text-4xl mr-4" :class="item.icon"></div>
            <div>
              <div class="text-gray-500">
                <el-statistic :title="item.title " :value="item.value " />
              </div>
<!--              <div class="text-2xl">{{ item.value }}</div>-->
            </div>
          </div>
<!--          <el-statistic title="test" :value="outputValue" />-->
        </el-card>
      </el-col>
    </el-row>


    <!-- 数据图表 -->
    <el-row :gutter="20" class="mt-4" style="margin-top: 30px">
      <el-col :span="12" style="display: flex;flex-direction: column;align-items: center">
        <e-charts class="chart" :option="userOption" />
        <span>最近一周的用户数量</span>
      </el-col>
      <el-col :span="12" style="display: flex;flex-direction: column;align-items: center">
        <e-charts class="chart" :option="videoOption" />
        <span>最近一周的视频数量</span>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
// 示例数据
// import ECharts from 'echarts'
import {computed, onMounted, ref} from "vue";
import { useTransition } from '@vueuse/core'
import {getAllStat, getRecentUserAndVideoStat} from "@/api/admin-api.js";
// const source = ref(0)
// const outputValue = useTransition(source, {
//   duration: 1500,
// })
// source.value = 200
// import echarts from "echarts";
// import { ElChart } from 'element-plus'
const stats = ref([
  { title: '总用户数', value: 1234, icon: 'i-ep-user' },
  { title: '视频总数', value: 5678, icon: 'i-ep-video-play' },
  { title: '评论总数', value: 9876, icon: 'i-ep-chat-line-round' },
  { title: '弹幕总数', value: 1313510, icon: 'i-ep-chat-line-square' }
])


onMounted(async ()=>{
  const res = await getAllStat()
  console.log(res)
  stats.value[0].value = res.data.userCount
  stats.value[1].value = res.data.videoCount
  stats.value[2].value = res.data.commentCount
  stats.value[3].value = res.data.danmakuCount

  const {data} = await getRecentUserAndVideoStat(7)
  console.log(data)
  console.log(data.userStatMap)
  console.log(data.videoStatMap)
  let videoArray = mapToArrayObj(data.videoStatMap);
  let userArray = mapToArrayObj(data.userStatMap);
  console.log(videoArray)

  videoArray.sort(dateCompare);
  userArray.sort(dateCompare);
  console.log(videoArray)
  videoData.value = videoArray;
  userData.value = userArray;





})
function dateCompare(a, b) {
  return new Date(a.name).getTime() - new Date(b.name).getTime();
}
function mapToArrayObj(map) {
  return Object.keys(map).map(key => ({ name: key, value: map[key] }));
}
// const data = ref([
//   { value: 11, name: 'A' },
//   { value: 31, name: 'B' },
//   { value: 75, name: 'C' },
//   { value: 25, name: 'D' },
//   { value: 16, name: 'E' },
// ]);
// 最近一周的视频数据
const videoData = ref([
  { value: 11, name: 'A' },
  { value: 31, name: 'B' },
  { value: 75, name: 'C' },
  { value: 25, name: 'D' },
  { value: 16, name: 'E' },
]);

//最近一周的用户数据
const userData = ref([
  { value: 11, name: 'A' },
  { value: 31, name: 'B' },
  { value: 75, name: 'C' },
  { value: 25, name: 'D' },
  { value: 16, name: 'E' },
]);


const videoOption = computed(() => ({
  xAxis: {
    type: 'category',
    data: videoData.value.map(v => v.name.slice(5, 10)),
  },
  yAxis: {
    type: 'value',
    data: videoData.value.map(v => v.value),
  },
  series: [
    {
      type: 'bar',
      data: videoData.value.map(v => v.value),
    },
  ],
}));


const userOption = computed(() => ({
  xAxis: {
    type: 'category',
    data: userData.value.map(v => v.name.slice(5, 10)),
  },
  yAxis: {
    type: 'value',
    data: userData.value.map(v => v.value),
  },
  series: [
    {
      type: 'line',
      data: userData.value.map(v => v.value),
    },
  ],
}));

const option = computed(() => ({
  xAxis: {
    type: 'category',
    data: data.value.map(v => v.name),
  },
  yAxis: {
    type: 'value',
    data: data.value.map(v => v.value),
  },
  series: [
    {
      type: 'line',
      data: data.value.map(v => v.value),
    },
  ],
}));
const data = ref([
  { value: 11, name: 'A' },
  { value: 31, name: 'B' },
  { value: 75, name: 'C' },
  { value: 25, name: 'D' },
  { value: 16, name: 'E' },
]);
setInterval(() => {
  data.value = data.value.map(item => ({
    ...item,
    value: Math.random() * 100,
  }));
}, 1000);
</script>

<style scoped lang="scss">
.chart {
  height: 350px;
}
</style>

